import React from 'react';
import './state.scss';
import $ from 'auxiliaries/extends/dom7.collection';

class Download extends React.Component {
    #DownloadType;
    #MaxScroll;
    #window = $(window);
    #body = $(document.body);
    #html = $("html");

    #DownloadPromise;
    #ScrollDOM;
    #ScrollChildDOM;
    DOM;

    constructor(props) {
        super(props);

        this.#DownloadType = this.props?.type || "scroll";
        this.state = {
            status: '',
            scrollString: '...'
        };
    }

    componentDidMount() {
        this.count = setInterval(() => {
            if (this.state.status === 'loading') {
                //todo: 要优化 不能用这种方式来做动画操作
                this.setState({
                    scrollString: this.state.scrollString?.length >= 3 ? '' : ((this.state.scrollString || '') + '.')
                });
            }
        }, 250);

        let parent = $(this.DOM);
        while (true) {
            let overflow = parent.css('overflow');

            if (parent[0] === document.body) {
                this.#ScrollDOM = window;
                this.#ScrollChildDOM = document.body;
                break;
            }

            if (overflow === 'auto' || overflow === 'scroll') {
                this.#ScrollDOM = parent;
                this.#ScrollChildDOM = parent.children()[0];
                break;
            }

            parent = parent.parent();
        }


        this.#MaxScroll = $(this.#ScrollChildDOM).outerHeight() - $(this.#ScrollDOM).height();
        $(this.#ScrollDOM)
            .off('scroll touchmove').on('scroll', _ => this.scrollEvent(_))
            .on('touchmove', _ => this.scrollEvent(_));
    }

    scrollEvent(_) {
        if (this.#DownloadPromise) {
            return;
        }

        clearTimeout(this.time);
        this.time = setTimeout(() => {
            this.#MaxScroll = $(this.#ScrollChildDOM).height() - $(this.#ScrollDOM).height();
            let top = $(this.#ScrollDOM).scrollTop() || this.#body.scrollTop() || this.#html.scrollTop();
            let {
                onDownloadBefore
            } = this.props;

            if (this.#DownloadPromise) {
                return;
            }

            let ok = onDownloadBefore?.();

            if (ok === false) {
                return;
            }

            _.stopPropagation();
            //偏移量 40,在未移动到底部之前就开始作判定
            if (!isNaN(top) && (top + 10) >= this.#MaxScroll) {
                this.#DownloadPromise = this.props?.onDownload?.();
                try {
                    (async () => {
                        await this.setState({
                            status: 'loading'
                        });
                        await this.#DownloadPromise;
                        await this.setState({
                            status: ''
                        });

                        this.#DownloadPromise = null;
                    })();
                } catch (_) {

                }

            }
        }, 50);
    }
    
    componentWillUnmount() {
        clearInterval(this.count);
        this.#window.off('scroll touchmove');
        this.setState = function () {

        }
    }

    //滚动加载更多
    scrollRender() {
        switch (this.state.status) {
            case 'loading':
                return (
                    <div className={"center"}>
                        <span>正在加载更多</span>
                        <span className={"point" + (this.state.scrollString?.length >= 1 ? ' on' : '')}/>
                        <span className={"point" + (this.state.scrollString?.length >= 2 ? ' on' : '')}/>
                        <span className={"point" + (this.state.scrollString?.length >= 3 ? ' on' : '')}/>
                    </div>
                );
            default:
                return null;
        }
    }

    //todo: 翻页渲染
    pageRender() {
        return (
            <>
                page render
            </>
        );
    }

    render() {
        return (
            <div ref={_ => this.DOM = _} className={"--download-container"}>
                {
                    this[{
                        'scroll': 'scrollRender',
                        'page': 'pageRender',
                    }[this.#DownloadType]]?.()
                }
            </div>
        );
    }
}

class Refresh extends React.Component {
    render() {
        return (
            <div className={"refresh-container"}>

            </div>
        );
    }
}

class Hint extends React.Component {
    render() {
        return (
            <div className={"end-of-screen-bottom"} onClick={this.props.onClick}>
                <p>{this.props.children}</p>
            </div>
        );
    }
}

export {
    Download,
    Refresh,
    Hint,
};